<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">
<button @click="sortType=1">升序</button>
<button @click="sortType=2">降序</button>
<input type="text" v-model="search" />
<ul>
    <li v-for="item in newPerson" :key="item.id">
        {{item.name}}---{{item.age}}
    </li>
</ul>
</div>
<script>
    Vue.config.productionTip=false;

    const vm=new Vue({
        el:"#app",
        data(){
            return {
                search:"",
                person: [
              { id: "001", name: "laowang", age: 18 },
              { id: "002", name: "xiaowang", age: 12 },
              { id: "003", name: "dawang", age: 33 },
              { id: "004", name: "xiaohuang", age: 6 },
            ],
            sortType:0,

            };
        },
        computed:{
            newPerson() {
                //过滤
                const filterResult=this.person.filter((item)=>{
                    return item.name.includes(this.search);
                });
                //排序
                return filterResult.sort((a,b)=>{
                    //sort排序原理:依次进入两个值,a是后边的值,b是前边的值
                    //当sort的回调函数返回负数 则交换两个值在数组中的位置
                    switch(this.sortType) {
                        case 1:
                            return a.age-b.age;
                        case 2:
                            return b.age-a.age;
                    }
                })
            }
        }
    })

 </script>
</body>

</html>